<template>
  <view class="page">
    <!-- 自定义顶部导航栏 -->
    <view class="header">
      <text class="title">学途AI</text>
    </view>

    <!-- 主体内容（绝对定位，无滚动，内容溢出时会被裁剪） -->
	<view class="content">
	  <!-- AI 虚拟形象 GIF 动图 -->
	  <image class="ai-avatar" src="/static/avatar_ai.gif" mode="aspectFit"></image>

	  <!-- 欢迎语 -->
	  <text class="greeting-text">晚上好 👋 有什么想知道的，尽管问我！</text>

	  <!-- 详细欢迎信息 -->
	  <view class="welcome-message-box">
		<text class="message-title">👋 欢迎来到 学途AI —— 你的智能校园伙伴！</text>
		<text class="message-paragraph">
		  无论你是刚刚踏入大学校园的新生，还是即将毕业的大四学子，学途AI 都将全程陪伴你走过精彩的四年大学时光。从入学报到、宿舍安排、学费缴纳，到课程查询、考试安排、成绩查看，再到假期通知与学习规划，学途AI 都为你提供一站式智能服务。
		</text>
		<text class="message-paragraph">
		  我们致力于打造一个懂你、贴心、高效的校园助手，让你的学习之路更轻松、更清晰、更有趣。让AI成为你成长路上的朋友，陪你从“启航”走向“远行”。
		</text>
		<text class="message-slogan">
		  📘 未来可期，学途有你。<br/>
		  🤖 智能相伴，一路同行。
		</text>
		<text class="message-paragraph">
		  欢迎使用 学途AI！
		</text>
	  </view>
	</view>

    <!-- 底部输入框（不被 TabBar 遮挡） -->
    <view class="input-container">
      <view class="input-wrapper">
        <image class="menu-icon" src="/static/history.png" />
        <input class="message-input" type="text" placeholder="请输入您的需求描述" />
        <image class="send-icon" src="/static/enter.png" />
        <image class="voice-icon" src="/static/suona.png" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
/* ！！重要：全局样式覆盖，确保 UniApp 自身包装层没有滚动 ！！ */
/* 放在 App.vue 的 <style> 标签中，或放在 public/common.css 中，或者直接在当前页面 <style> 顶部 */
/* 强制 uni-page-body 不滚动并充满可用高度 */
uni-page-body {
  height: 100% !important; /* 确保占据父容器的所有高度 */
  overflow: hidden !important; /* 强制禁用滚动 */
}
/* 针对 H5 额外处理 html,body (如果问题仍在 H5 环境) */
html, body {
  height: 100%;
  overflow: hidden;
}


/* 根容器：铺满 UniApp 包装层，并彻底禁用滚动 */
.page[data-v-6b1f4146] { /* 加上 data-v 属性确保只作用于当前页面 */
  position: relative; /* 核心：作为 content 绝对定位的参考 */
  width: 100%; /* 填充父容器 uni-page-body 的宽度 */
  height: 100%; /* 填充父容器 uni-page-body 的高度 */
  overflow: hidden; /* 确保当前页面元素没有任何滚动效果，内容溢出直接裁剪 */
  background-color: #e3e6ff;
  box-sizing: border-box; /* 边框盒模型 */
}

/* 顶部自定义导航栏 */
.header[data-v-6b1f4146] {
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  right: 0;
  height: 44px; /* 导航栏自身高度 */
  /* 适配设备状态栏，提供一个回退值（例如20px，如果var未生效） */
  padding-top: var(--status-bar-height, 0px); /* 默认为0，如果var不工作，可以尝试固定值，如20px */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  z-index: 10; /* 确保在内容上方 */
  box-sizing: border-box; /* 确保 padding 计入总高度 */
  /* header 的总高度用于 content 的 top 计算 */
  height: calc(44px + var(--status-bar-height, 0px)); /* 44px (header height) + status bar */
}
.title[data-v-6b1f4146] {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

/* 底部输入容器：固定在 UniApp TabBar 之上 */
.input-container[data-v-6b1f4146] {
  position: fixed; /* 固定在底部 */
  left: 0;
  right: 0;
  bottom: 50px; /* ！！！核心：精确地在 UniApp TabBar (50px) 之上 ！！！ */
  z-index: 20; /* 确保在内容和 TabBar 上方 */
  background-color: #fff;
  border-top: 1px solid #eee; /* 这里的1px边框是关键 */
  /* padding 用于容纳输入框及安全区域，其总高度会用于 content 的 bottom 计算 */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  box-sizing: border-box; /* 确保 padding 计入总高度 */
  /* input-container 的总高度，用于 content 的 bottom 计算 */
  /* 1px(border-top) + 10px(top-pad) + 36px(input-height) + 10px(base-bottom-pad) + safe-area */
  height: calc(1px + 10px + 36px + 10px + env(safe-area-inset-bottom));
}

/* 主体内容：使用绝对定位精确占满 header 之下和 input-container 之上的空间 */
.content[data-v-6b1f4146] {
  position: absolute; /* 核心：绝对定位 */
  left: 0;
  right: 0;
  /* top 距离：导航栏的总高度 */
  top: calc(44px + var(--status-bar-height, 0px)); /* 使用回退值 */
  /* bottom 距离：TabBar 的高度 (50px) + input-container 的总高度 */
  bottom: calc(50px + (1px + 10px + 36px + 10px + env(safe-area-inset-bottom)));
  overflow: hidden; /* 核心：确保内容区内部没有任何滚动效果，内容溢出直接裁剪 */
  padding: 20px; /* 内容内部的内边距 */
  box-sizing: border-box; /* 确保 padding 计入总高度 */
  background-color: #e3e6ff; /* 仅为视觉区分 */
}

/* 输入框内部布局（与你原结构一致） */
.input-wrapper[data-v-6b1f4146] {
  display: flex;
  align-items: center;
}
.menu-icon[data-v-6b1f4146],
.send-icon[data-v-6b1f4146],
.voice-icon[data-v-6b1f4146] {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.message-input[data-v-6b1f4146] {
  flex: 1; /* 占据可用空间 */
  height: 36px;
  border: none;
  background-color: #f5f5f7; /* 修改：背景色恢复为浅色，以适配深色字体 */
  border-radius: 20px;
  padding: 0 10px 0 20px;
  font-size: 14px;
  color: #333; /* 修改：输入的字体颜色为 #333 */
}
/* 主体内容：使用绝对定位精确占满 header 之下和 input-container 之上的空间 */
.content {
  position: absolute; /* 核心：绝对定位 */
  left: 0;
  right: 0;
  display: flex; /* 使用 flex 布局来垂直居中内部元素 */
  flex-direction: column;
  align-items: center; /* 水平居中 */
  /* justify-content: center; */ /* 如果内容不多时垂直居中，但如果内容多，会让内容从中间开始显示，不符合聊天/对话习惯 */
}

/* AI 形象 GIF 样式 */
.ai-avatar {
  width: 150px; /* 根据图片调整大小 */
  height: 150px; /* 根据图片调整大小 */
  border-radius: 50%; /* 如果是圆形头像，添加圆角 */
  margin-top: 40px; /* 距离顶部导航栏的距离 */
  margin-bottom: 20px; /* 距离欢迎语的距离 */
}

/* 欢迎语样式 */
.greeting-text {
  color: #333333; /* 文字颜色白色 */
  font-size: 16px;
  font-weight: bold;
}

/* 详细欢迎信息盒子样式 */
.welcome-message-box {
  width: 90%; /* 控制文本块宽度 */
  line-height: 1.6;
}
.message-title {
  display: block; /* 确保独占一行 */
  color: #333333; /* 标题颜色白色 */
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px; /* 距离第一段的距离 */
}
.message-paragraph {
  display: block; /* 确保独占一行 */
  margin-bottom: 10px; /* 段落间距 */
}
.message-slogan {
  display: block; /* 确保独占一行 */
  color: #9292ff; /* 蓝色调，与图片中快捷按钮颜色相似 */
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}


/* 输入框内部布局（与你原结构一致） */
.input-wrapper {
  display: flex;
  align-items: center;
}
.menu-icon,
.send-icon,
.voice-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.message-input {
  flex: 1; /* 占据可用空间 */
  height: 36px;
  border: none;
  background-color: #333; /* 输入框背景色也变深 */
  border-radius: 20px;
  padding: 0 10px 0 20px;
  font-size: 14px;
  color: #fff; /* 输入文字颜色 */
}
/* placeholder 颜色 */
.message-input::placeholder {
  color: #888;
}
</style>